<template>
    <view style="width: 100%;" class="add">
        <view class="uni-title uni-common-mt uni-common-pl"><input type="text"  v-model="questionsinfo.question" /></view>
        <view class="uni-list">
            <radio-group @change="radioChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
                    <view>
                        <radio :value='item.value' :checked="index == current"  @change="radioChange" />
                    </view>
                  <!--  <view>{{item.name}}</view> -->
					<input class="answer" type="text" v-model="item.name" />
					<uni-icons type="closeempty" size="32" @click="reoptions(index)"></uni-icons>
                </label>
            </radio-group>
        </view>
		<view class="addoptions">
				<uni-icons type="plusempty" size="32" @click="addoptions" v-if="addoptionschanger"></uni-icons>
		</view>
		<view class="register" @click="modifyquestions">
			保存修改
		</view>
		<backnext></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
    </view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {questionedit} from "@/common/api/topics.js"
export default {
	components: {
	        uniIcons
	 },
    data() {
        return {
			title:"",
			tik:['0','1','2','3'],
            items: [],
            current: 0,
			questionsinfo:{},
			options:{},
			addoptionschanger:true,
        }
    },
	onLoad(options){
		if(options.questionsinfo){
			this.questionsinfo = JSON.parse(options.questionsinfo)
			this.current = this.questionsinfo.answer
			this.items = this.options =  JSON.parse(JSON.parse(options.optionsinfo))
			
			// this.questionsinfo.options = JSON.parse(JSON.parse(options.optionsinfo))
			// this.options = this.questionsinfo.options.split(","); //字符分割
			// /*重新处理到items 便于ABCD选项*/
			// for (let i = 0; i < this.options.length; i++) {
			// 	this.items.push({
			// 		value: i,
			// 		name: this.options[i],
			// 	})
			// }
			if(this.options.length == 4){this.addoptionschanger = false}
			
		}
	console.log(this.questionsinfo.answer)
	},
    methods: {
		/*提交修改*/
		modifyquestions(){
			this.reloadradiovalue()

			var tmpoptions = ''
			tmpoptions = JSON.stringify(this.items)
			// for (let i = 0; i < this.items.length; i++) {
			// 	tmpoptions = tmpoptions+this.items[i].name+','
			// }
			// tmpoptions = tmpoptions.substr(0,tmpoptions.length-1);
			
			questionedit({
				'id':''+this.questionsinfo.id,
				'question':this.questionsinfo.question,
				'options':tmpoptions,
				'answer':''+this.current
				
			}).then(res=>{
				if(res.data.code == 200){
				uni.showToast({
				    icon: 'none',
				    title: '修改成功',
				    duration: 2000
				});
				// this.backrefresh('123')
				setTimeout(function() {
				// 	that.backrefresh('123')
					uni.navigateTo({
					    url: './trainingTopicslist'
					});
					// uni.switchTab({
					// 	url: './trainingTopicslist'
					// });
				},2000)
				}else{
					uni.showToast({
					    icon: 'none',
					    title: '网络繁忙,请稍后再试',
					    duration: 2000
					});
				}
				
				
			})
		},
        radioChange: function(evt) {
			// console.log(evt)
			this.current = evt.detail.value
            // for (let i = 0; i < this.items.length; i++) {
            //     if (this.items[i].value === evt.target.value) {
            //         this.current = i;
            //         break;
            //     }
            // }
        },
		/*添加选项*/
		addoptions(){
			
			var itemssum = this.items.length

			
			this.items.push({
				value:''+itemssum,
				name:'',
				tik:this.tik[itemssum]
			})
			if(itemssum>=3){this.addoptionschanger = false;return}
		},
		/*删除选项*/
		reoptions(e){
			console.log(e)
			if(this.items.length<=4){this.addoptionschanger = true}
			if(this.items.length==2){this.addoptionschanger = true;this.reloadradiovalue();return}
			this.$delete(this.items, e)
			this.reloadradiovalue()
			this.backRefresh('')
		},
		/*重置 radioval*/
		reloadradiovalue(){
			 for (let i = 0; i < this.items.length; i++) {
				 this.items[i].value = ''+i
				 this.items[i].tik = this.tik[i]
			 }
		},
    }
}
</script>

<style lang="scss">
	.add{
	.uni-title{
		width: 95%;
		margin: auto;
	}
	.uni-list{
		/* width: 95%; */
		margin: auto;
	}
	.answer {
    display: block;
    font-size: 16px;
    line-height: 1.4em;
    height: 1.4em;
    min-height: 1.4em;
    overflow: hidden;
    margin-right: auto;
    width: 100%;
}
.register{
	width: 143px;
		height: 42px;
		color: rgba(255, 255, 255, 1);
		background-color: rgba(42, 130, 228, 1);
		border-radius: 18px;
		font-size: 15px;
		line-height: 42px;
		text-align: center;
		margin: auto;
		margin-top: 50px;
}
.addoptions{
	// background-image: ;
	position: fixed;
	left: 90%;
	
}
}
</style>
